<template>
  <view class="statistics-container">
    <view class="statistics-header">
      <text class="title">游戏统计</text>
    </view>

    <view class="statistics-content">
      <view class="stat-section">
        <text class="section-title">基本信息</text>
        <view class="stat-grid">
          <view class="stat-item">
            <text class="stat-label">当前等级</text>
            <text class="stat-value">{{ pet.level }}</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">互动次数</text>
            <text class="stat-value">{{ pet.stats.interactions || 0 }}</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">成就数</text>
            <text class="stat-value">{{ pet.stats.achievements || 0 }}/4</text>
          </view>
        </view>
      </view>

      <view class="stat-section">
        <text class="section-title">游戏时间</text>
        <view class="stat-grid">
          <view class="stat-item wide">
            <text class="stat-label">总游戏时间</text>
            <text class="stat-value">{{ formatPlayTime }}</text>
          </view>
        </view>
      </view>

      <view class="stat-section">
        <text class="section-title">成就列表</text>
        <view class="achievements-list">
          <view v-for="(achievement, id) in pet.achievements" :key="id" 
                class="achievement-item" :class="{ completed: achievement.completed }">
            <view class="achievement-icon">
              <text>{{ getAchievementIcon(id) }}</text>
            </view>
            <view class="achievement-info">
              <view class="achievement-header">
                <text class="achievement-name">{{ achievement.name }}</text>
                <text v-if="achievement.completed" class="reward">+{{ achievement.reward }}</text>
              </view>
              <text class="achievement-desc">{{ achievement.description }}</text>
              <view class="progress-bar">
                <view class="progress" :style="{ width: achievement.progress + '%' }"></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Statistics',

  computed: {
    ...mapState(['pet']),

    formatPlayTime() {
      const minutes = this.pet.stats.playTime || 0
      if (minutes < 60) {
        return `${minutes}分钟`
      }
      const hours = Math.floor(minutes / 60)
      const remainingMinutes = minutes % 60
      if (hours < 24) {
        return `${hours}小时${remainingMinutes}分钟`
      }
      const days = Math.floor(hours / 24)
      const remainingHours = hours % 24
      return `${days}天${remainingHours}小时${remainingMinutes}分钟`
    }
  },

  methods: {
    getAchievementIcon(id) {
      const icons = {
        firstPet: '🆕',
        dailyCare: '📅',
        masterTrainer: '⭐',
        gourmet: '🍖'
      }
      return icons[id] || '🎯'
    }
  }
}
</script>

<style lang="scss">
.statistics-container {
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

  .statistics-header {
    margin-bottom: 30rpx;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .stat-section {
    margin-bottom: 30rpx;

    .section-title {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 16rpx;
      padding-left: 12rpx;
      border-left: 6rpx solid #FF6B6B;
    }
  }

  .stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
  }

  .stat-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    text-align: center;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    &.wide {
      grid-column: span 3;
    }

    .stat-label {
      font-size: 24rpx;
      color: #666;
      margin-bottom: 8rpx;
      display: block;
    }

    .stat-value {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
  }

  .achievements-list {
    .achievement-item {
      display: flex;
      align-items: center;
      padding: 20rpx;
      background: #fff;
      border-radius: 12rpx;
      margin-bottom: 15rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
      
      &.completed {
        background: #f0f7ff;
        
        .achievement-icon {
          background: #4CAF50;
        }
        
        .achievement-name {
          color: #4CAF50;
        }
      }
      
      .achievement-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 40rpx;
        background: #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
        font-size: 36rpx;
      }
      
      .achievement-info {
        flex: 1;
        
        .achievement-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10rpx;
          
          .achievement-name {
            font-size: 28rpx;
            font-weight: bold;
            color: #666;
          }
          
          .reward {
            font-size: 24rpx;
            color: #FFB300;
            font-weight: bold;
          }
        }
        
        .achievement-desc {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 10rpx;
        }
        
        .progress-bar {
          height: 6rpx;
          background: #eee;
          border-radius: 3rpx;
          overflow: hidden;
          
          .progress {
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #66BB6A);
            transition: width 0.3s ease;
          }
        }
      }
    }
  }
}
</style>
